<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="home.css" />
    <script src="./vue.js"></script>
    <script src="./api/api.js"></script>
  </head>

  <body>
    <div class="container" id="app">
      <div class="top">
        <div class="back" @click="showDialog = true">
          <img src="src/over.png" alt=""  />
          <span>退出</span>
        </div>
        <h2>中医智能四诊体质检测</h2>
        <div class="new">
          <div @click="goReport">
            <img src="./src/nav-report.jpg" alt="">
            <span>查看报告</span>
          </div>
          <div @click="reset">
            <img src="./src/nav-reload.png" alt="">
            <span>刷新</span>
          </div>
          <!-- <img src="src/reload.png" alt="" @click="reset" />
          <span>刷新</span> -->
        </div>
      </div>
      <div class="middle">
        <div class="icon" >
          <img class="item-img" :src="tongue" alt=""  @click="goFace"/>
          <!-- <div class="stat-ok">已采集</div> -->
        </div>

        <div class="icon" ><img :src="face" alt="" @click="goTong" /></div>

        <div class="icon" ><img :src="left_mai" alt="" @click="goMai"/></div>

        <div class="icon" >
          <img :src="right_mai" alt="" @click="goMai2" />
        </div>

        <div class="icon" >
          <img :src="bingshi" alt="" @click="goBingli" />
        </div>
        <div class="icon" >
          <img :src="wenzhen_more" alt="" @click="goWen" />
        </div>

        <!-- <div class="icon" @click="goReport">
          <img src="src/reportBack.png" alt="" />
          <img src="src/reportIcon.png" alt="" class="miniIcon" />
        </div> -->
      </div>
      <div class="tan" v-show="ifShow">{{message}}采集完成</div>
      <div class="dialog-box-contaner" @click.self="showDialog = false" v-if="showDialog">
        <div class="dialog-box">
          <div class="dialog-body">
            <div class="body-title">温馨提示</div>
            <div class="body-content">
              请确认是否退出中医体质测试?
            </div>
          </div>
          <div class="dialog-bottom">
            <div class="btn-cancel" @click="showDialog = false">取消</div>
            <div class="btn-confirm" @click="exit">确认</div>
          </div>
        </div>
      </div>
      
    </div>
    <script>
      const itemImgList = {
        'tongue':["src/ton.png","src/sheOk.png"],
        'face':["src/face.png","src/faceOk.png"],
        'left_mai':["./src/left.png","./src/leftOk.png"],
        'right_mai':["src/right.png","src/rightOk.png"],
        'bingshi':["src/bingli.png","src/bingliOk.png"],
        'wenzhen_more':["src/ask.png","src/askOk.png"]
      }
      const app = Vue.createApp({
        data() {
          return {
            ifShow: false,
            message: "",
            faceSrc: "src/face.png",
            sheSrc: "src/ton.png",
            left: "src/left.png",
            right: "src/right.png",
            wen: "src/ask.png",
            bingli:"src/bingli.png",
            showDialog:false,
            face: "src/face.png",
            tongue: "src/ton.png",
            left_mai: "src/left.png",
            right_mai: "src/right.png",
            wenzhen_more: "src/ask.png",
            bingshi:"src/bingli.png",
          };
        },
        created() {
          this.getSate()
          // if (localStorage.getItem("face")) {
          //   this.faceSrc = "src/faceOk.png";
          // }
          // if (localStorage.getItem("she")) {
          //   this.sheSrc = "src/sheOk.png";
          // }
          // if (localStorage.getItem("left")) {
          //   this.left = "./src/leftOk.png";
          // }
          // if (localStorage.getItem("right")) {
          //   this.right = "./src/rightOk.png";
          // }
          // if (localStorage.getItem("wen")) {
          //   this.wen = "./src/wenOk.png";
          // }
          // if (localStorage.getItem("bingli")) {
          //   this.bingli = "./src/bingliOk.png";
          // }
          if (localStorage.getItem("item") === "face") {
            this.message = "面象";
            console.log(this.message);
            // this.faceSrc = "src/faceOk.PNG";
            this.ifShow = true;
            setTimeout(() => {
              this.ifShow = false;
              localStorage.removeItem("item");
            }, 2000);
          } else if (localStorage.getItem("item") === "she") {
            this.message = "舌象";
            console.log(this.message);
            // this.sheSrc = "src/sheOk.PNG";
            this.ifShow = true;
            setTimeout(() => {
              this.ifShow = false;
              localStorage.removeItem("item");
            }, 2000);
          } else if (localStorage.getItem("item") === "left") {
            this.message = "脉象";
            console.log(this.message);
            // this.left = "./src/leftOk.png";
            this.ifShow = true;
            setTimeout(() => {
              this.ifShow = false;
              localStorage.removeItem("item");
            }, 2000);
          } else if (localStorage.getItem("item") === "right") {
            this.message = "脉象";
            console.log(this.message);
            // this.right = "./src/rightOk.png";
            this.ifShow = true;
            setTimeout(() => {
              this.ifShow = false;
              localStorage.removeItem("item");
            }, 2000);
          } else if (localStorage.getItem("item") === "wen") {
            this.message = "问诊";
            console.log(this.message);
            // this.wen = "./src/wenOk.png";
            this.ifShow = true;
            setTimeout(() => {
              this.ifShow = false;
              localStorage.removeItem("item");
            }, 2000);
          }else if (localStorage.getItem("item") === "bingli") {
            this.message = "病史";
            console.log(this.message);
            // this.wen = "./src/wenOk.png";
            this.ifShow = true;
            setTimeout(() => {
              this.ifShow = false;
              localStorage.removeItem("item");
            }, 2000);
          }
        },

        methods: {
          getSate(){
            fetch("/renji/admin/api/get_stat", {
              method: "POST",
              headers: {
                "content-type": "application/json",
                Authorization: `Bearer ${localStorage.getItem('token')}`,
              }
            })
              .then((res) => {
                return res.json();
                // console.log(res);
              })
              .then((data) => {
                if(data.code !== 0){
                  return this.showAlert(code.message)
                } 
                // console.log(data);
                this.setItemStat(data.data)
              })
              .catch((err) => console.log("The Error Is: " + err));
          },
          setItemStat(data){
            for(let key of Object.keys(data)){
              this[key] = itemImgList[key][data[key]]
            }
            
          },
          goFace() {
            // location.replace("./face-0.html");
            bys.invokeApp(JSON.stringify({
              "action":"openCameraFace",
              "params":{
                token:window.localStorage.getItem('token')
              } 
            }))
          },
          goTong() {
            // location.replace("./sheTou.html");
            bys.invokeApp(JSON.stringify({
              "action":"openCameraTongue",
              "params":{
                token:window.localStorage.getItem('token')
              } 
            }))
          },
          goMai() {
            // location.replace("./mai-0.html");
            bys.invokeApp(JSON.stringify({
              "action":"openPulse",
              "params":{
                token:window.localStorage.getItem('token'),
                location:'leftHand'
              } 
            }))
          },
          goMai2() {
            // location.replace("./mai-2.html");
            bys.invokeApp(JSON.stringify({
              "action":"openPulse",
              "params":{
                token:window.localStorage.getItem('token'),
                location:'rightHand'
              } 
            }))
          },
          goBingli() {
            // location.replace("./face-0.html");
            location.replace("./bingli.html");
          },
          goWen() {
            location.replace("./WenZhen.html");
          },
          goReport() {
            window.localStorage.setItem('showReport',1)
            location.href = "./report-0.html"
          },
          exit() {
            // location.replace("./exit.html");
            this.showDialog = false
            window.localStorage.clear()
            location.replace("./index.html");
          },
          reset() {
            this.faceSrc = "src/face.png";
            this.sheSrc = "src/ton.png";
            this.left = "src/left.png";
            this.right = "src/right.png";
            this.wen = "src/ask.png";
            this.bingli = "src/bingli.png";
            localStorage.clear();
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
  <style>
    .dialog-box-contaner{
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .dialog-box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 57.9vw;
      height: 32.03vw;
      border-radius: 20px;
      background-color: #fff;
    }
    .dialog-body{
      padding: 5.07vw;
    }
    .body-title{
      font-size: 3.613vw;
      font-weight: bolder;
    }
    .body-content{
      margin-top:2.441vw;
      font-size: 2.637vw;
    }
    .dialog-bottom{
      position: absolute;
      bottom: 5.27vw;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .dialog-bottom >div{
      width:23.83vw;
      height: 7.03vw;
      font-size: 2.93vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 300px;
    }
    .btn-cancel{
      margin-right: 2.246vw;
      background-color: #D8DDD6;
      color: #000;
    }
    .btn-confirm{
      color: #fff;
      background: linear-gradient(to right, rgb(150, 150, 249), rgb(105, 105, 252));
    }
  </style>
</html>
